<template>
  <div class="header-box">
    <div class="header-top flex-par">
      <div class="header-txt flex-par ">
        <img class="header-logo" src="../assets/image/logo-white.png" alt="">
        <div class="web-title active-style" @click="toPage('/')">鄂电“悟空”RPA共享平台</div>
      </div>
      <div class="flex-son"></div>
      <el-menu :default-active="$store.state.activePath" :ellipsis="false" :router="true" class="header-menu"
        mode="horizontal" @select="handleSelect">
        <el-menu-item class="header-menu-item" index="/">首页</el-menu-item>
        <el-menu-item class="header-menu-item" index="/yingyongIndex">应用中心</el-menu-item>
        <el-menu-item class="header-menu-item" index="/featuredApps">精选应用</el-menu-item>
        <el-menu-item class="header-menu-item" index="/statistics">统计仪表盘</el-menu-item>
        <el-menu-item v-if="token" class="header-menu-item" index="/kaifaIndex">开发者中心</el-menu-item>
      </el-menu>

      <div class="flex-son"></div>
      <div class="login-btn-container flex-par" v-if="!token">
        <el-button size="small" type="primary" class="go-login-btn" @click="goLogin">
          <img src="../assets/image/user2.png" alt="">
          用户登录</el-button>
      </div>
      <div v-if="token" class="flex-par" style="position:relative;right:16px">
        <div class="nav-action  margin-r-10 nav-action-list text-c">
          <div><img src="../assets/image/user.png" style="width:40px;height:40px;margin-top:15px" /></div>
          <ul>
            <li class="active-style" style="border-bottom:1px solid #0686F9" @click="openPwdModel">修改密码
            </li>
            <li class="active-style" @click="testLogout" style="cursor: pointer; z-index: 1001;">退出登录</li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 退出登录 -->
    <el-dialog 
      custom-class="logout-win" 
      v-model="logout_model" 
      width="420px"
      :append-to-body="true"
      :modal="true"
      :close-on-click-modal="false"
      :center="true">
      <div class="model-item-title">
        <div class="model-title">退出登录</div>
      </div>
      <div class="text-c">确定退出吗？</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="small" @click="logout_model = false">取消</el-button>
          <el-button size="small" type="primary" @click="logoutF">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 修改密码弹窗 -->
    <el-dialog 
      custom-class="pwd-win" 
      v-model="pwd_model" 
      width="500px"
      :append-to-body="true"
      :modal="true"
      :close-on-click-modal="false"
      :center="true">
      <div class="model-item-title">
        <div class="model-title">修改密码</div>
      </div>
      <el-form :model="sendForm" label-width="100px">
        <el-form-item label="原密码">
          <el-input v-model="sendForm.oldPassword" type="password" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="sendForm.newPassword" type="password" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码">
          <el-input v-model="sendForm.reNewPassword" type="password" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="small" type="primary" @click="changePwd">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <div class="header-bottom flex-par">
      <div class="flex-son"></div>
      <div class="header-inf text-t flex-par">
        <div class="flex-son"></div>
        <!-- <div>{{ weatherInfo.weather }}</div>
        <div class="flex-son"></div>
        <div>
          气温 <span class="blue-txt">{{ weatherInfo.degree }}℃</span>
        </div>
        <div class="flex-son"></div>
        <div>
          风力 <span class="blue-txt">{{ weatherInfo.wind_power }}级</span>
        </div>
        <div class="flex-son"></div>
        <div>
          湿度 <span class="blue-txt">{{ weatherInfo.humidity }}</span>
        </div>
        <div class="flex-son"></div> -->
        <div style="margin-right:10px">
          {{ nowdate }}
        </div>
        <div style="margin-right:10px">
          <span class="blue-txt">{{ nowtime }}</span>
        </div>
      </div>
    </div>
    <!--  <div>
    1
      <router-link to="/">
        <img src="../../assets/images/logo-white.png" style="height: 45px;margin-top: 7.5px;margin-left: 10px;" class="float-l active-style" />
      </router-link>
      <div class="header-nav-box">
        <div class="header-nav">
          <div :class="activeIndex==1?'header-nav-item slh active':'header-nav-item slh'" @click="changeActiveIndex(1)">
            <Tooltip class="width-percent-100 height-percent-100" content="市场化交易服务系统">
              <span class="active-style">市场化交易服务系统</span>
            </Tooltip>
          </div>
          <div :class="activeIndex==2?'header-nav-item slh active':'header-nav-item slh'" @click="changeActiveIndex(2)">
            <Tooltip class="width-percent-100 height-percent-100" content="用户配电设备运行监测系统">
              <span class="active-style">用户配电设备运行监测系统</span>
            </Tooltip>
          </div>
          <div :class="activeIndex==3?'header-nav-item slh active':'header-nav-item slh'" @click="changeActiveIndex(3)">
            <Tooltip class="width-percent-100 height-percent-100" content="综合能源监测系统">
              <span class="active-style">综合能源监测系统</span>
            </Tooltip>
          </div>
          <div :class="activeIndex==4?'header-nav-item slh active':'header-nav-item slh'" @click="changeActiveIndex(4)">
            <Tooltip class="width-percent-100 height-percent-100" content="综合能源业务推广系统">
              <span class="active-style">综合能源业务推广系统</span>
            </Tooltip>
          </div>
        </div>
      </div>
      <ul class="nav-bar-right">
        <li class="header-item " @click="toHomePage">
          <Tooltip content="回到首页">
            <img src="../../assets/images/header-icon-sy.png" class="header-icon active-style" alt />
          </Tooltip>
        </li>
        <li class="header-item " @click="toTodo">
          <Tooltip content="待办">
            <img src="../../assets/images/header-icon-xxtx.png" class="header-icon active-style" alt />
          </Tooltip>
        </li>
        <li class="header-item " v-if="userType==1||userType==2" @click="toUserInfo">
          <Tooltip content="个人中心">
            <img src="../../assets/images/header-icon-grzx.png" class="header-icon active-style" alt />
          </Tooltip>
        </li> 
        <li class="header-item" @click="logout">
          <Tooltip content="退出账号">
            <img src="../../assets/images/header-icon-tc.png" class="header-icon active-style" alt />
          </Tooltip>
        </li>
      </ul>
    </div> -->
  </div>
</template>
<script>
import { logout, updatePwd } from '@/assets/api/api.js';
const $ = require('jquery');
export default {
  data() {
    return {
      weatherInfo: {},
      activeIndex: '',
      userType: '',
      myLoginName: '',
      myRoleId: '',

      pwd_model: false,
      logout_model: false,
      sendForm: {
        oldPassword: '',
        reNewPassword: '',
        newPassword: ''
      },
      nowdate: '',
      nowtime: '',

      token: '',
    };
  },
  methods: {
    goLogin() {

      this.$router.push({ path: '/loginPage' });
    },
    openPwdModel() {
      this.sendForm = {
        oldPassword: '',
        newPassword: '',
        reNewPassword: ''
      }
      this.pwd_model = true
    },
    testLogout() {
      console.log('退出登录按钮被点击');
      this.logout_model = true;
      console.log('logout_model设置为:', this.logout_model);
    },
    changePwd() {
      if (this.sendForm.newPassword == this.sendForm.reNewPassword) {
        if (this.sendForm.newPassword == '' || this.sendForm.oldPassword == '') {
          this.$message({
            message: '请输入原密码与新密码',
            type: 'error',
            center: true,
          });
          return false
        }
        updatePwd(this.sendForm)
          .then((res) => {
            if (res.code == 0) {
              this.$message({
                message: '修改成功，请重新登录',
                type: 'success',
                center: true,
              });
              localStorage.clear();
              setTimeout(() => {
                this.$router.push({ path: '/loginPage' });
              }, 2000);
            }
          })
          .catch((err) => { });
      } else {
        this.$message({
          message: '两次新密码应该保持一致！',
          type: 'error',
          center: true,
        });
      }
    },
    // 退出登录
    logoutF() {
      logout()
        .then((res) => {
          if (res.code == 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              center: true,
            });
            localStorage.clear();
            setTimeout(() => {
              this.$router.push({ path: '/loginPage' });
            }, 600);
          } else {
            this.getCodeImg()
          }
        })
        .catch((err) => { });
    },
    handleSelect(key, keypath) {
      // console.log(key)
      // this.activeIndex = key
      // if (key == 1) {
      //   this.$router.push({ path: '/' });
      // }
      // if (key == 2) {
      //   this.$router.push({ path: '/yingyong' });
      // }
      // if (key == 3) {
      //   this.$router.push({ path: '/kaifa' });
      // }
    },
    toPage(path) {
      this.$router.push({ path });
      // ////console.log(this.$store.state.activePath);
    },
    toUserInfo() {
      if (this.userType == 1) {
        this.$router.push({
          path:
            '/userManage/franchiseeInfo/1/' + localStorage.getItem('myUserId'),
        });
      } else if (this.userType == 2) {
        this.$router.push({
          path: '/userManage/userInfo/1/' + localStorage.getItem('myUserId'),
        });
      }
    },
  },
  mounted() {
    this.token = localStorage.getItem('token')
  },
};
</script>
<style scoped>
.header-box {
  height: 70px;
  width: 100%;
  background: linear-gradient(135deg, rgba(0, 21, 42, 0.95) 0%, rgba(0, 56, 86, 0.95) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 198, 255, 0.3);
  position: relative;
  z-index: 1000;
  transition: var(--transition-normal);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.header-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-electric);
  opacity: 0.8;
}

.header-top {
  height: 70px;
  width: 1400px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  transition: var(--transition-normal);
}

.header-txt {
  line-height: 60px;
  height: 60px;
  color: white;
}

.header-inf {
  width: 572px;
  height: 30px;
  line-height: 10px;
  color: white;
  font-size: 14px;
  /* padding-left: 50px; */
  position: relative;
  top: -4px;
}

.header-inf .blue-txt {
  color: #00f2f1;
  margin-left: 6px;
}

.header-logo {
  width: 46px;
  height: 46px;
  margin-top: 12px;
}

.web-title {
  font-weight: 700;
  color: white;
  height: 70px;
  line-height: 70px;
  font-size: 20px;
  margin-left: 16px;
  transition: var(--transition-normal);
  position: relative;
  overflow: hidden;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.web-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 198, 255, 0.3), transparent);
  transition: left var(--transition-slow);
}

.web-title:hover {
  color: var(--electric-blue);
  text-shadow: 0 0 10px rgba(0, 198, 255, 0.5);
}

.web-title:hover::before {
  left: 100%;
}

.nav-action {
  width: 140px;
  height: 60px;
  margin-right: -15px;
  position: relative;
  vertical-align: middle;
  color: white;
}

.nav-action:hover {
  /* background-image: url(../assets/imgs/u401_selected.png); */
  color: rgba(0, 255, 255, 1);
}

/* 
.nav-action-item {
  width: 145px;
  height: 50px;
  margin-top: 15px;
  margin-right: -15px;
  background-image: url(../assets/imgs/nav.png);
  position: relative;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: white;
}

.nav-action-item:hover {
  background-image: url(../assets/imgs/navSelected.png);
  color: rgba(0, 255, 255, 1);
  opacity: 1;
} */

.nav-item-title {
  font-size: 16px;
  text-align: center;
  height: 20px;
  line-height: 20px;
  position: relative;
  top: 50%;
  margin-top: -10px;
}

.nav-action-list {
  position: relative;
  z-index: 1001;
}

.nav-action-list ul {
  display: none;
  line-height: 20px;
  background: white;
  color: rgba(0, 21, 42, 1);
  width: 120px;
  position: absolute;
  top: 50px;
  right: 0;
  z-index: 1000;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hover);
  border: 1px solid rgba(0, 123, 255, 0.1);
}

.nav-action-list ul li {
  padding: 12px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition-normal);
  border-radius: var(--radius-sm);
  margin: 2px;
}

.nav-action-list ul li:hover {
  background: var(--gradient-card);
  color: var(--primary-blue);
  transform: translateX(2px);
}

.nav-action-list:hover ul {
  display: block !important;
}

/* 
.nav-action-item ul {
  display: none;
  line-height: 20px;
  background: #163f99;
  color: rgba(0, 255, 255, 1);
  border: #068aff 1px solid;
  position: absolute;
  top: 95%;
  right: 10px;
  z-index: 999;
}

.nav-action-item li {
  padding: 12px 36px;
  font-size: 12px;
  border-bottom: #068aff 1px solid;
}

.nav-action-item li:last-child {
  border-bottom: none;
}

.nav-action-item li:hover {
  background: #085681;
  opacity: 1;
}

.nav-action-item:hover ul {
  display: block;
} */

.header-box /deep/ .el-form {
  width: 90%;
}

.header-box /deep/ .el-dialog__header {
  background-size: 360px 50px !important;
}

.header-menu {
  height: 60px;
  line-height: 60px;
  background-color: transparent;
}

.header-menu-item {
  font-size: 18px;
  margin-left: 50px;
  font-weight: 600;
  color: white;
  height: 70px;
  position: relative;
  transition: var(--transition-normal);
  overflow: hidden;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.header-menu-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 3px;
  background: var(--gradient-electric);
  transition: var(--transition-normal);
  transform: translateX(-50%);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(0, 198, 255, 0.5);
}

.header-menu-item:hover {
  color: var(--electric-blue);
  text-shadow: 0 0 8px rgba(0, 198, 255, 0.6);
  transform: translateY(-1px);
}

.header-menu-item:hover::after {
  width: 100%;
}

.header-menu-item .active {
  border-bottom: 1px solid white;
}

.el-menu--horizontal {
  border-bottom: none;
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  background-color: transparent;
  opacity: 0.7;
  color: white;
}

.el-menu--horizontal>.el-menu-item.is-active {
  color: #81D3F8 !important;
  border-bottom: none;
}

.go-login-btn {
  background: var(--gradient-primary) !important;
  height: 40px;
  padding: 0 20px;
  border: none !important;
  border-radius: var(--radius-lg);
  font-size: 15px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 0;
  align-self: center;
  transition: var(--transition-normal);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  letter-spacing: 0.5px;
}

.go-login-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left var(--transition-slow);
}

.go-login-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  background: var(--gradient-electric) !important;
}

.go-login-btn:hover::before {
  left: 100%;
}

.go-login-btn img {
  height: 22px;
  width: 22px;
  margin-right: 4px;
}

/* 登录按钮容器样式 */
.login-btn-container {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* 强制修复退出登录功能 */
.nav-action-list ul li {
  pointer-events: auto !important;
  user-select: none !important;
}

.nav-action-list ul li:hover {
  pointer-events: auto !important;
}

/* 对话框样式优化 */
.logout-win .el-dialog {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-hover) !important;
}

.pwd-win .el-dialog {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-hover) !important;
}
</style>